import React from 'react';
import { connect } from 'dva';
import { TabBar, Icon, ActivityIndicator } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import content from '../../common/contentCss/content.css';
import styles from './routeStyles.css';
import CustTitle from '../../common/title/title';
import BasicInfo from './pages/basicInfo/basicInfo';
import Describe from '../partTimeDetail/pages/describe/describe';
import Environment from './pages/environment/environment';
import FootBtn from '../../../../common/buttons/Btn';
import CustItem from '../../../../common/items/CustomsItemBadge';
import PublishPartTimeList from './pages/publishPartTimeList/publishPartTimeList';

import arrowIcon from '../../../../icons/personal/arrow.png';
import writeIcon from '../../../../icons/personal/write-icon.png';

const compayAddressIcon = require('../../../../icons/partTimeDetail/address-icon.png');
const compayPhoneIcon = require('../../../../icons/partTimeDetail/phone-icon.png');

function EnterpriseTnformation({
  loading,
  dispatch,
  enterpriseInformation
}) {

  const { customers,partTimeList } = enterpriseInformation;

  // const licenseImage = customers.enterprise.

  // console.log('enterpriseInformation', JSON.stringify(enterpriseInformation));

  const titleProps = {
    titleName:'企业信息',
    goBack(){
      dispatch(routerRedux.goBack());
    },
  }

  const basicInfoProps = {
    name:customers.name,
    industry:customers.customerIndustry,
    verification:customers.verification,
  }

  const describeProps = {
    titleName:'企业简介',
    content: customers.enterprise ? customers.enterprise.brief : '',
  }

  const environmentProps = {
    list:[]
  }

  //公司地址
  const compayAddressProps = {
    icon:compayAddressIcon,
    textName:(
      <div>
        <span style={{color:'#999',fontSize:'0.8125em'}}>公司地址: </span>
        <div style={{color:'#999',fontSize:'0.8125em'}}>
          {customers.enterprise ? customers.enterprise.site : ''}
        </div>
      </div>
    ),
    overflowText:'',
    overflowTextColor:'',
    onOk(){
    },
  }

  //联系电话
  const compayPhoneProps = {
    icon:compayPhoneIcon,
    textName:<span style={{color:'#999',fontSize:'0.8125em'}}>联系电话: {customers.phone}</span>,
    overflowText:'',
    overflowTextColor:'',
    onOk(){
    },
  }

  const MarginHeight = () => <div style={{height: '0.6em', backgroundColor:'#F2F2F2'}}></div>;
  const PaddingBottom = () => <div style={{height: '3.5em', backgroundColor:'#F2F2F2'}}></div>;
  const CustLine = () => <div style={{width: '100%', height:'0.05em', backgroundColor:'#E4E4E4'}}></div>;

  const partTimeListProps = {
    list: partTimeList,
    onViewMember(id){
      console.log('查看详情', id);
      dispatch(routerRedux.push({
        pathname: '/part-time-detail',
        query: {
          id,
        }
      }));
    },
    onPagination() {
      // if (loading || JSON.stringify(list) == "[]") {
      //   return;
      // }

      return
      if (pageNum >= pages) {
        return;
      }
      dispatch({
        type: 'members/query',
        payload: {
          pageNum: pageNum + 1,
        }
      })
    },
    showLimit(){
      console.log('查看详情', id);
      dispatch(routerRedux.push({
        pathname: '/part-time-detail',
        query: {
          id,
        }
      }));
    }
  }

  function mapClick(companyName, latitude,longitude){
    console.log('地图');
    dispatch({
      type:'txMap/querySuccess',
      payload:{
        companyName,
        latitude:0,
        longitude:0,
      }
    })
    dispatch(routerRedux.push({
      pathname: '/tx-map',
      query: {
      }
    }));
  }

  const footProps = {
    textValue: customers.favors == 0 ? '关注商家' : '已关注',
    onOk(){
      dispatch({
        type:'enterpriseInformation/postFollow',
        payload:{
          id:customers.id,
        }
      })
    }
  }

  const phoneCall = (phone) => {
    if(phone){
      return(
        <a href={`tel:${customers.phone}`}>
          {/* <CustItem {...compayPhoneProps}/> */}
          <div className={styles.items} style={{backgroundColor:'#fff'}}>
            <div className={styles.workTimeLabel}>
              <div className={styles.labelContent}>
                <div className={styles.labelContentLeft}>
                  <img src={compayPhoneIcon}/>
                  <span>联系电话：</span>
                </div>
                <div className={styles.addressName}>
                  {phone}
                </div>
                <div className={styles.address}>
                  <span></span>
                  <div className={styles.itemArrow}>
                    <Icon type='right' size='md' color='#6A6A6A' />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
      )
    }else{
      return(
        <div className={styles.items} style={{backgroundColor:'#fff'}}>
          <div className={styles.workTimeLabel}>
            <div className={styles.labelContent}>
              <div className={styles.labelContentLeft}>
                <img src={compayPhoneIcon}/>
                <span>联系电话：</span>
              </div>
              <div className={styles.addressName}>
                {phone}
              </div>
              <div className={styles.address}>
                <span></span>
                <div className={styles.itemArrow}>
                  <Icon type='right' size='md' color='#6A6A6A' />
                </div>
              </div>
            </div>
          </div>
        </div>
      )
    }
  }

  return (
    <div className={content.content}>
      <CustTitle {...titleProps}/>
      <div style={{marginTop: '2.9em',}}>
      <BasicInfo {...basicInfoProps}/>
      <Describe {...describeProps}/>
      <MarginHeight/>
      <Environment {...environmentProps}/>
      <MarginHeight/>
      {/* <CustItem {...compayAddressProps}/> */}
      <div className={styles.items} style={{backgroundColor:'#fff'}} onClick={() => mapClick()}>
        <div className={styles.workTimeLabel}>
          <div className={styles.labelContent}>
            <div className={styles.labelContentLeft}>
              <img src={compayAddressIcon}/>
              <span>工作地址：</span>
            </div>
            <div className={styles.addressName}>
              {customers.enterprise ? customers.enterprise.site : ""}
            </div>
            <div className={styles.address}>
              <span></span>
              <div className={styles.itemArrow}>
                <Icon type='right' size='md' color='#6A6A6A' />
              </div>
            </div>
          </div>
        </div>
      </div>
      <CustLine/>
      {phoneCall(customers.phone)}
      <PublishPartTimeList {...partTimeListProps}/>
      <PaddingBottom/>
      </div>
      <div className={styles.foot}>
        <FootBtn {...footProps}/>
      </div>
      <ActivityIndicator
        toast
        text=""
        animating={loading}
      />
    </div>
  )
}

function mapStateToProps(state, ownProps) {
  return {
    loading: state.loading.global,
    enterpriseInformation: state.enterpriseInformation
  }
}
export default connect(mapStateToProps)(EnterpriseTnformation);
